<template>
	<view class="content">
		<view class="ul1">
		    <view class="li">
		        <view class="i" :style="'width:' + width + '%;'"></view>
		    </view>
			<view class="li" v-for="(item,index) in stepList" :key="index">
				<view class="div">{{index | num}}</view>
				<view class="div">{{item.name}}</view>
				<view class="div"> {{item.date | ymd}} </view>
				<view class="div">{{item.date | time}}</view>
			</view>
		</view>
		
		
		<view class="list">
			<view class="go-detail" >商品详情</view>
			<navigator class="ul2" v-for="(item,index) in order.orderItems" :url="'/pages/allgoods/details?pid=' + order.orderItems[index].productId">
			    <view class="li"><image :src="baseUrl + item.thumbnail"></image></view>
			    <view class="li">
			        <view class="name">{{item.name}}</view>
			        <view class="zl">重量：{{item.weight}}g</view>
					<view class="zl">发货数：{{item.shippedQuantity}}</view>
			    </view>
			    <view class="li">¥{{item.price}}<br><text>x{{item.quantity}}</text></view>
			</navigator>
			<view class="btn-box">
				<navigator class="btn a" :url="'/pages/order/warranty?id='+orderSn" v-if="!order.isAftersales && (order.status=='COMPLETED' || order.status=='SHIPPED' || order.status=='RECEIVED')">电子质保单</navigator>
				<navigator class="btn a" :url="'/pages/order/after?id=' + orderSn" v-if="!order.isAftersales && (order.status=='COMPLETED' || order.status=='SHIPPED' || order.status=='RECEIVED')">申请售后</navigator>
			</view>
		</view>
		<view class="list payInfo">
			<view class="jg" v-if="order.type !== 'EXCHANGE'">
			    <view>商品总价：</view>
			    <view>商品总价<text>￥{{order.amount}}</text></view>
			</view>
			<view class="jg" v-if="order.type !== 'EXCHANGE'">
			    <view>店铺优惠：</view>
			    <view>店铺优惠<text>-￥{{order.couponDiscount}}</text></view>
			</view>
			<view class="jg amountPaid" v-if="order.type !== 'EXCHANGE' && (order.status === 'PENDING_SHIPMENT' || order.status === 'SHIPPED ' || order.status === 'COMPLETED ')">
			    <view>实付款：</view>
			    <view>￥{{order.amountPaid}}</view>
			</view>
			<view class="jg" v-if="order.type === 'EXCHANGE'">
			    <view>兑换积分：</view>
			    <view>兑换积分<text>{{order.exchangePoint}}</text></view>
			</view>
			<view class="jg" v-if="order.type === 'EXCHANGE'">
			    <view>赠送积分：</view>
			    <view>赠送积分<text>{{order.rewardPoint}}</text></view>
			</view>
		</view>
		
		<view class="list info">
			<view class="item">
				<view>收货信息：</view>
				<view>{{order.consignee}},{{order.phone | phone}},{{order.areaName}}<br>{{order.address}}</view>
			</view>
			<view class="item">
				<view>订单编号：</view>
				<view>{{orderSn}} | <text class="copy" @click="copyBtn">复制</text></view>
			</view>
			<view class="item" v-if="showInfo">
				<view>创建时间：</view>
				<view>{{order.createdDate}}</view>
			</view>
			<view class="item" v-if="showInfo">
				<view>付款时间：</view>
				<view><text v-if="order.orderPayments && order.orderPayments.length > 0">{{order.orderPayments[0].createdDate}}</text><text v-else>-</text></view>
			</view>
			<view class="item" v-if="showInfo">
				<view>发货时间：</view>
				<view><text v-if="order.OrderShippings && order.OrderShippings.length > 0">{{order.OrderShippings[0].createdDate}}</text><text v-else>-</text></view>
			</view>
			<view class="item" v-if="showInfo">
				<view>成交时间：</view>
				<view><text v-if="order.completeDate">{{order.completeDate}}</text><text v-else>-</text></view>
			</view>
			<view class="show" :class="{on: !showInfo}" @click="showInfo = !showInfo"><text>{{showInfo? '收起' : '展开'}}</text></view>
		</view>
		
		<!-- <view class="list info">
		    <view>订单编号</view>
		    <view>订单编号: {{orderSn}}</view>
		</view>
		<view class="list info">
		    <view>订单信息 </view>
		    <view>订单下单时间：{{order.createdDate}}</view>
		    <view>订单支付时间：<text v-if="order.orderPayments && order.orderPayments.length > 0">{{order.orderPayments[0].createdDate}}</text><text v-else>-</text></view>
		    <view>订单发货时间：<text v-if="order.OrderShippings && order.OrderShippings.length > 0">{{order.OrderShippings[0].createdDate}}</text><text v-else>-</text></view>
		</view>
		<view class="list info">
		    <view>收货信息</view>
		    <view>收货人：{{order.consignee}}</view>
		    <view>收货地址：{{order.areaName}}{{order.address}}</view>
		    <view>联系电话：{{order.phone | phone}}</view>
		    <view>物流单号：<text v-if="order.OrderShippings && order.OrderShippings.length > 0">{{order.OrderShippings[0].trackingNo}}</text><text v-else>-</text></view>
		</view> -->
		<view class="list wl" v-if="showLog && wlList.length > 0">
			<view v-for="item,index in wlList" :key="index">{{item.time | ymd}} {{item.time | time}} - <text>{{item.context}}</text></view>
		</view>
		<view class="list wl" v-if="showLog && wlList.length === 0">
			暂无物流信息
		</view>
		
		
	</view>
</template>

<script>
	import {
		orderDetail, transitStep
	} from '@/api/order.js'
	export default {
		watch: {
			stepList: {
				handler() {
					this.initStep()
				},
				deep: true
			}
		},
		filters: {
			num(val) {
				let num = val + 1
				if(num < 10) {
					num = '0' + num
				}
				return num
			},
			ymd(val) {
				if(val !== '') {
					return val.split(' ')[0]
				} else {
					return ''
				}
			},
			time(val) {
				if(val !== '') {
					return val.split(' ')[1]
				} else {
					return ''
				}
			}
		},
		data() {
			return {
				stepList: [],
				orderSn: '',
				showLog: false,
				order: {},
				wlList: {},
				width: 0,
				baseUrl: this.$baseUrl,
				showInfo: true
			}
		},
		onLoad(options) {
			this.orderSn = options.sn
			this.init()
			if(options.id && options.id !== '') {
				this.getWL(options.id)
				this.showLog = true
			}
		},
		methods: {
			init() {
				orderDetail({orderSn: this.orderSn}).then(res => {
					this.stepList = res.data.order.orderFlowChart
					this.order = res.data.order
				})
			},
			async getWL(orderId) {
				await transitStep({orderId}).then(res => {
					this.wlList = res.data.order_transitSteps
				})
			},
			initStep() {
				let step = 0
				let num = 0
				this.stepList.forEach(r => {
					if(r.isTrue) {
						step++
					}
				})
				if(step >= this.stepList.length) {
					this.width = 100
				} else {
					num = ( step - 1 ) * 2 + 1
					this.width = ( num / ( ( this.stepList.length - 1 ) * 2 ) ) * 100
				}
			},
			copyBtn() {
				let that = this
				uni.setClipboardData({
					data: that.orderSn,
					success: function (res) {
						uni.showToast({
							title: '复制成功',
						})
					},
					fail:function (res) {
						uni.showToast({
							title: '复制失败',
						})
					}
				})
			}
		}
	}
</script>

<style>
.content {
	padding-bottom: 30rpx;
	background-color: #fff;
}
.list {
	padding: 30rpx;
	margin-top: 30rpx;
	background-color: #fff;
}
.list .go-detail {
	font-size: 32rpx;
	margin-bottom: 40rpx;
	display: inline-block;
	padding-right: 35rpx;
	background: url(~@/static/images/icon44.png) no-repeat right center;
	background-size: 12rpx 22rpx;
}
.list view {
	line-height: 1.8;
}
.list.info {
	margin-top: 0;
}
.list.info .item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 25rpx;
	font-size: 28rpx;
}
.list.info .item view:nth-child(2) {
	text-align: right;
	color: #999;
	font-size: 23rpx;
}
.list.info .item view:nth-child(2) text {
	font-size: 23rpx;
}
.list.info .item view:nth-child(2) .copy {
	color: #333;
	display: inline-block;
	padding-left: 15rpx;
}
.list.wl {
	font-size: 28rpx;
	padding-top: 0;
	margin-top: 0;
}
.list.wl view:not(:last-child) {
	margin-bottom: 15rpx;
}
.list.wl view text {
	color: #999;
}
.payInfo {
	margin: 0 30rpx;
	padding: 15rpx 0 10rpx;
	border-bottom: 1rpx solid #d1d1d1;
}
.jg {
	display: flex;
	justify-content: space-between;
	margin-bottom: 15rpx;
}
.jg view:nth-child(2) {
	color: #999;
}
.jg view:nth-child(2) text {
	display: inline-block;
	width: 120rpx;
	text-align: right;
	color: #C10016;
}
.jg .amountPaid {
	font-size: 30rpx;
}

.show {
	text-align: center;
}
.show text {
	display: inline-block;
	padding-right: 35rpx;
	color: #999;
	background: url(~@/static/images/icon100.png) no-repeat right center;
	background-size: 23rpx 10rpx;
	font-size: 23rpx;
}
.show.on text {
	background: url(~@/static/images/icon101.png) no-repeat right center;
	background-size: 23rpx 10rpx;
}

.ul2 {
    /* border: 1px solid #EDEDED; */
    background-color: #fff;
    display: flex;
    align-items: center;
}

.ul2 .li:nth-child(1) image {
    margin-right: 20rpx;
	width: 157rpx;
	height: 157rpx;
}

.ul2 .li:nth-child(2) {
	flex-grow: 4;
}

.ul2 .li:nth-child(2) view:nth-child(2) {
    color: #999;
    /* font-size: 14rpx; */
}
.ul2 .li:nth-child(2) view:nth-child(3) {
    color: #999;
    /* font-size: 14rpx; */
}

.ul2 .li:nth-child(3) {
    flex-grow: 2;
    text-align: right;
    /* font-size: 14rpx; */
    /* padding: 0 20rpx; */
}

.ul2 .li:nth-child(3) text {
	color: #999;
}

.ul2 .li:nth-child(4) {
    flex-grow: 2;
    padding: 0 20rpx;
    /* font-size: 14rpx; */
}


.ul2 .li:nth-child(5) {
    /* font-size: 14rpx; */
    color: #D30500;
}

.btn-box {
	display: flex;
	justify-content: flex-end;
}

.btn-box .btn {
	line-height: 46rpx;
	width: 141rpx;
	text-align: center;
	border-radius: 46rpx;
	margin-left: 26rpx;
	font-size: 21rpx;
	border: 1rpx solid #939393;
}


.ul1 {
    display: flex;
    padding: 35rpx 30rpx 0;
    background: #F8F9FA;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
    margin-bottom: 3rpx;
	padding-bottom: 30rpx;
}

.ul1 .li:nth-child(1) {
    width: 95%;
    position: relative;
    margin: auto;
    margin-bottom: -22rpx;
}
.ul1 .li:nth-child(1) .i {
    width: 37%;
    height: 8rpx;
    background: #C10016;
    position: relative;
    display: block;
    z-index: 1;
}

.ul1 .li:nth-child(1) .i::after {
    position: absolute;
    right: -8rpx;
    top: 0;
    content: '';
    border-bottom: 4rpx solid #bfbbbb00;
    border-top: 4rpx solid #8f8c8c00;
    border-left: 8rpx solid #C10016;
}

.ul1 .li:nth-child(1)::after {
    position: absolute;
    left: 0;
    top: calc(50% - 2rpx);
    content: '';
    width: 100%;
    background: #DCDCDC;
    height: 4rpx;
}

.ul1 .li>.div:nth-child(1) {
    font-size: 14rpx;
    width: 36rpx;
    height: 36rpx;
    text-align: center;
    /* line-height: .26rpx; */
    margin: auto;
    background: #C10016;
    border-radius: 50%;
    color: #fff;
    border: 5rpx solid #DCDCDC;
    margin-bottom: 10rpx;
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ul1 .li>.div:nth-child(2) {
	font-size: 18rpx;
}


.ul1 .li>.div:nth-child(2) {
    padding-bottom: 15rpx;
}

.ul1 .li>.div:nth-child(3),
.ul1 .li>.div:nth-child(4) {
    color: #888888;
    line-height: 20rpx;
    font-size: 13rpx;
}
.downpdf{
	width: 1.5rem;
	height: .5rem;
	line-height: .5rem;
	margin: auto;
	margin-top: .3rem;
}
</style>
